<template>
	<el-button class="mb20" @click="add" type="primary">新增</el-button>
	  
	  
	  <el-table class="mb20" :data="tableData" border style="width: 100%">
		<el-table-column prop="id" label="活动ID" />
		<el-table-column prop="title" label="标题" />
		
		<el-table-column prop="jifen" label="积分" />
		<el-table-column prop="adlink" label="链接" />
		<el-table-column prop="starttime" label="开始时间" />
		<el-table-column prop="endtime" label="结束时间" />
		<el-table-column
	          prop="images"
	          label="图片"
	          width="100"      
	        >
	          <template #default="scope">		  
	              <el-image
	                  style="width: 100px; height: 100px"
	                  :src="ifImgHeader(scope.row.images)"
	                  :preview-src-list="[ifImgHeader(scope.row.images)]"
	                >
	                </el-image>
	          </template>
	        </el-table-column>
			<el-table-column
			      prop="is_show"
			      label="是否显示"
			      width="100"
			    >
			      <template #default="scope"> 
			         {{scope.row.is_show==0?'不显示':'显示'}}
			      </template>
			    </el-table-column>
			<el-table-column
			      prop="is_hot"
			      label="是否火热"
			      width="100"
			    >
			      <template #default="scope"> 
			         {{scope.row.is_hot==0?'不火热':'火热'}}
			      </template>
			    </el-table-column>
				<el-table-column
				      prop="author"
				      label="厂区"
				      width="100"  
				    >
				      <template #default="scope">						  
				         {{scope.row.author==0?'不限':scope.row.author==1?'潥阳厂区':'金坛厂区'}}
				      </template>
				    </el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="mini"
					@click="edit({row:scope.row,index:scope.$index},(x)=>{edites(x)})">
					编辑</el-button>
				<el-button size="mini" type="danger" @click="removeModal({row:scope.row,index:scope.$index})">删除</el-button>
				<el-button size="mini" type="primary" @click="scwei(scope.row.ewmid,scope.row.id)">生成二维码</el-button>
				<el-button size="mini"
					@click="editwin(scope.row.id)">
					编辑获奖</el-button>
					<el-button size="mini"
						@click="viewwin(scope.row.id)">
						查看获奖</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="modalStatecode" title="二维码">
		
		<div v-if="modalStatecode" style="width: 80%;margin: 0 auto;text-align: center;" class="qrcode" ref="qrCodeUrl"></div>
	    
	</el-dialog>	
	<el-dialog v-model="modalState" title="标题">
		<el-form :model="form" ref="rule" :rules="rules">
			<el-form-item label="标题"  prop="title" :label-width="formLabelWidth">
				<el-input v-model="form.title" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="链接"   :label-width="formLabelWidth">
				<el-input v-model="form.adlink" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="是否火热"   :label-width="formLabelWidth">
				
			    <el-radio v-model="form.is_hot" label="0" size="large">不火热</el-radio>
			    <el-radio v-model="form.is_hot" label="1" size="large">火热</el-radio>
			 </el-form-item>
			 <el-form-item label="是否显示"   :label-width="formLabelWidth">
			 	
			     <el-radio v-model="form.is_show" label="0" size="large">不显示</el-radio>
			     <el-radio v-model="form.is_show" label="1" size="large">显示</el-radio>
			  </el-form-item>
			 <el-form-item label="厂区"   :label-width="formLabelWidth">
			     <el-radio v-model="form.author" label="0" size="large">不限</el-radio>
			     <el-radio v-model="form.author" label="1" size="large">潥阳厂区 </el-radio>
				 <el-radio v-model="form.author" label="2" size="large">金坛厂区 </el-radio>
			  </el-form-item>
			<el-form-item label="积分"  prop="jifen" :label-width="formLabelWidth">
				<el-input v-model="form.jifen" autocomplete="off"></el-input>
			</el-form-item>
			
			<el-form-item label="时间"  prop="times" :label-width="formLabelWidth">
					<el-date-picker
					        format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
					        v-model="times"
							
					        type="daterange"
					        range-separator="To"
					        start-placeholder="请选择开始时间"
					        end-placeholder="请选择结束时间"
					      />
			</el-form-item>
           <el-form-item label="图片" :label-width="formLabelWidth">
           	<el-upload :key="form.images" class="avatar-uploader" 
			    :action="`${api}/index.php/index/Userinfo/uploadfile`"
				:headers="{tokenid:'nfxcx20220421mao2ctH4NHhSbkZnNPTFLRgtv'}"
				:data="jm()"
           		:show-file-list="false" 
				:on-success="(file)=>{editImgsProps({file,key:'images'})} ">
           		<img v-if="form.images" :src="ifImgHeader(form.images)" class="avatar" />
           		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
           	</el-upload>
			<span>
				参考尺寸:412*260
			</span>
           </el-form-item>
		   <el-form-item label="内容"  prop="content" :label-width="formLabelWidth">
		   	<!-- <el-input v-model="form.content" autocomplete="off"></el-input> -->
		   	<editor-wang :value="form.content" @change="changeWang"></editor-wang>
		   </el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit('rule')">确定</el-button>
				
			</span>
		</template>
	</el-dialog>
	<el-dialog v-model="modalStatewins" title="获奖人员">
		
		<div v-if="viewarr.length>0" v-for="(item,index) in viewarr" style="display: flex;">
		<div style="margin:10px 30px 0 0;">
			<span>名称</span> <span>{{item.hdqtxmname}}</span>
		</div>
		<div style="margin:10px 30px 0 0;"><span>加积分</span> <span>{{item.hdjifen}}</span></div>
		<div style="margin:10px 30px 0 0;"><span>手机号码</span> <span>{{item.numbers}}</span></div>
		</div>
	</el-dialog>
	<el-dialog v-model="modalStatewin" title="获奖人员">
		<!-- <el-button type="primary" @click="addhj" style="margin-bottom: 30px;">新增获奖人员</el-button> -->
		<el-form  :inline="true" class="demo-form-inline">
		    <el-form-item label="名称">
		      <el-input   v-model="hdqtxmname" />
		    </el-form-item>
		    <el-form-item label="加积分">
		      <el-input  v-model="hdjifen"/>
		    </el-form-item>
		    <el-form-item label="手机号码">
		      <el-input  v-model="numbers"/>
		    </el-form-item>
		  </el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalStatewin = false">取消</el-button>
				<el-button type="primary" @click="submitwind('rule')">确定</el-button>			
			</span>
		</template>		  
	</el-dialog>
</template>


<script lang="ts">

			

    import {getjm} from "../configs.js"
	import QRCode from 'qrcodejs2'
	import moment from "moment"
	import editorWang from '../components/wangEnduit'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		components:{
			editorWang
		},
		watch:{
			times(){
				this.form.starttime=this.times[0];
				this.form.endtime=this.times[1];
			},
		},
		data() {
			return {
				
				viewarr:[],
				modalStatewins:false,
				hdqtxmname:"",//     名称
				hdjifen :"",//   加积分
				numbers :"",//  手机
				modalStatewin:false,
				qrcode:null,
				modalStatecode:false,
				vtimes:['',''],
				formLabelWidth: '120px',
				times:"",
				form: {
					adlink:"",
					is_show:'1',
					images:"",
					content:"",
					jifen:"",
					starttime:"",
					endtime:"",
					title:"",
					is_hot:'0',
					author:'0',
					
				},
				tableData:[],
				rules: {
				        title: [
				          {
				            required: true,
				            message: '请填写标题',
				            trigger: 'blur',
				          }
				        ],
						jifen: [
						  {
						    required: true,
						    message: '请填写积分',
						    trigger: 'blur',
						  }
						],
						content: [
						  {
						    required: true,
						    message: '请填写内容',
						    trigger: 'blur',
						  }
						],
						starttime: [
						  {
						    required: true,
						    message: '请选择时间',
						    trigger: 'change',
						  }
						],
				},
				pid: []
			}
		},
		mounted() {
			this.getData();		
		},
		methods: {
			getjm(){
			return	getjm();
			},
			editwin(id){
				this.id=id;
				this.hdqtxmname=""
				this.hdjifen =""
				this.numbers =""
				this.modalStatewin=true;
			},
		 async	viewwin(id){
				this.modalStatewins=true;
		        let data = await this.$http.post("/index.php/index/Userinfo/hdqtxmjls",{id});
			
		        this.viewarr = data;
		 
			},
			submitwind(){
				this.$http.post("/index.php/index/Userinfo/hdqtxmjladd",{id:this.id,hdqtxmname:this.hdqtxmname,hdjifen:this.hdjifen,numbers:this.numbers}).then(data => {
					
					this.modalStatewin=false;
					
				})
			},
			addhj(){
				this.hjarr.push([]);
			},
			scwei(wei,id){
				console.log(wei)
				if(this.qrcode){
					this.qrcode.clear(); 
				}
				this.modalStatecode=true;
				this.$nextTick(()=>{
					this.creatQrCode(JSON.stringify({wei,id})); 
				})
				
				
			},
			edites(data){
				console.log(data.row)
				data.row.is_show=data.row.is_show+'';
				delete data.row.ewmid;
				var data =JSON.parse(JSON.stringify(data.row))
				this.times=[data.starttime,data.endtime];	
			},
			changeWang(html) {
				this.form.content=html;
			    console.log(html)
			},
            creatQrCode(wei) {
				console.log(wei)
                   this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
                       text: wei+'', // 需要转换为二维码的内容
                       width: 450,
                       height: 450,
                       colorDark: '#000000',
                       colorLight: '#ffffff',
                       correctLevel: QRCode.CorrectLevel.H
                   })
               },
			getData() {
				this.$http.get("/index.php/index/Userinfo/hdlist").then(data => {
					
					this.tableData=data;

				})
			},
			submit(ref) {
				console.log(this.$refs)
				this.doRules(this.$refs[ref]).then(()=>{
					if (this.id) this.form.id = this.id;
					
					this.$http.post(this.id ? '/index.php/index/Userinfo/hdedittj' : "/index.php/index/Userinfo/hdadd",
						this.form).then(data => {
						console.log(data)
						this.modalState = false;
						ElMessage({
							message: this.id ? '编辑成功' : '新增成功',
							type: 'success',
						})
						this.getData();
					})
				})
				
			},
			remove(data){
				this.$http.post("/index.php/index/Userinfo/hddel",{id:data.row.id}).then(data => {
					ElMessage({
						message: '删除成功' ,
						type: 'success',
					})
					this.getData();
				})
			},
			handleAvatarSuccess(file) {

				this.form.image = file.data;
			},
			


		}
	}
</script>
